<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="表名称：">
					<el-input v-model="state.queryParams.table" placeholder="请输入表名称" class="w-[180px]" />
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<div class="mb-1">
				<el-button type="success" v-auth="'setting/dbMysql/optimize'" icon="ele-Setting" @click="handleOptimize">优化表</el-button>
				<el-button type="success" v-auth="'setting/dbMysql/fragment'" icon="ele-Filter" @click="handleFragment">清理表</el-button>
			</div>
			<el-table :data="state.tableList" v-loading="state.loading" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="Name" label="表名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="Engine" label="表引擎" show-overflow-tooltip></el-table-column>
				<el-table-column prop="Rows" label="总行数" show-overflow-tooltip></el-table-column>
				<el-table-column prop="Data_free" label="碎片大小" show-overflow-tooltip>
					<template #default="{ row }">
						{{ bytesToSize(row.Data_free) }}
					</template>
				</el-table-column>
				<el-table-column prop="Data_length" label="数据大小" show-overflow-tooltip>
					<template #default="{ row }">
						{{ bytesToSize(row.Data_length) }}
					</template>				
				</el-table-column>
				<el-table-column prop="Index_length" label="索引大小" show-overflow-tooltip>
					<template #default="{ row }">
						{{ bytesToSize(row.Index_length) }}
					</template>
				</el-table-column>
				<el-table-column prop="Collation" label="字符集" show-overflow-tooltip></el-table-column>
				<el-table-column prop="Create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="Comment" label="表注释" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100" fixed="right">
					<template #default="{ row }">
						<div class="flex">
							<el-button type="primary" link @click="handleDetail(row)"> 详情 </el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-model="state" @tableChange="getTableList" />
		</el-card>
		<DetailDialog v-if="showDialog" ref="detailRef" @submit="getTableList" @close="showDialog = false" />
	</div>
</template>

<script setup lang="ts" name="dataBase">
import { reactive, onMounted, ref, nextTick, toRaw } from 'vue';
import { dbMysqlLists, dbMysqlOptimize, dbMysqlFragment } from '/@/api/setting/db';
import { bytesToSize } from '/@/utils/util';
import { usePage } from '/@/hooks/usePage';
import { messageSuccess } from '/@/utils/message';
import DetailDialog from '/@/views/setting/data/component/databaseDetail.vue';

const detailRef = ref();

const showDialog = ref(false);

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		table: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const tables_params = ref(<any>[]);

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: dbMysqlLists });

const handleSelectionChange = (arr) => {
	tables_params.value = [];
	arr.forEach(function(value, index) {
		tables_params.value.push(value.Name)
	});
}

const handleDetail = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		detailRef.value?.setFormData(row,function(){
			detailRef.value?.open();
		});
	});
};

const handleOptimize = async () => {
	await dbMysqlOptimize({tables:tables_params.value});
	messageSuccess('优化成功')
}

const handleFragment = async () => {
	await dbMysqlFragment({tables:tables_params.value});
	messageSuccess('清理成功')
}

// 页面加载时
onMounted(() => {
	getTableList();
});
</script>

<style scoped lang="scss"></style>
